<template>
  <view class="account-setting">
    <view class="row">
      <view class="row_label">账户头像</view>
      <view class="row_value">
        <image
          @click="handleUpAvatar"
          class="avatar"
          :src="userInfo.headImgUrl || defaultAvatar"
        ></image>
      </view>
    </view>
    <view class="row">
      <view class="row_label">账户昵称</view>
      <view class="row_value">
        <view v-if="showType === 'input'" class="flex_center">
          <uni-easyinput
            class="mr_10"
            v-model="username"
            type="text"
            placeholder="请输入用户名"
          />
          <uni-icons
            type="closeempty"
            color="red"
            size="22"
            @click="handleCancelEditName"
          />
          <uni-icons
            type="checkmarkempty"
            color="green"
            size="22"
            @click="handleSubmitEditName"
          />
        </view>
        <text v-else @click="taggleInput('text')">{{ userInfo.name }}</text>
      </view>
    </view>
    <view class="row">
      <view class="row_label">账户电话</view>
      <view class="row_value">
        <text v-if="userInfo.code">{{ userInfo.code }}</text>
        <button
          v-else
          open-type="getPhoneNumber"
          style="background-color: green; color: #fff; font-size: 24rpx"
          @getphonenumber="handleGetphonenumber"
        >
          <view class="flex_center">
            <image
              src="@/static/images/common/weixin_icon.png"
              mode="aspectFit"
              class="w_30 h_30 mr_20"
            />
            一键获取
          </view>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import useStore from '@/stores/userStore.js'
const { userInfo } = storeToRefs(useStore())
const { getUserInfo } = useStore()
import { apiEditNameOrAvatar, apiSetPhone } from '../../../apis/login'
import { appId } from '../../../common/config'
import defaultAvatar from '@/static/images/common/default_avatar.png'

const username = ref('')
// 头像上传
const handleUpAvatar = async () => {
  const res1 = await uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
  })
  const res2 = await uni.uploadFile({ filePath: res1.tempFilePaths[0] })
  const res3 = await apiEditNameOrAvatar({
    openId: userInfo.value.openId,
    headImgUrl: res2.fileViewUrl,
  })
  await getUserInfo()
  uni.showToast({
    title: '修改成功！',
    icon: 'success',
    duration: 1000,
    mask: true,
  })
}

const showType = ref('text')
const taggleInput = (type) => {
  if (type === 'text') {
    username.value = userInfo.value.name
    showType.value = 'input'
  }
}
// 失去焦点则自动修改名称
const handleSubmitEditName = async () => {
  if (!/^\s*\S+\s*$/.test(username.value)) {
    uni.showToast({
      title: '昵称不能为空！',
      icon: 'error',
      duration: 2000,
      mask: true,
    })
  } else if (username.value.length > 12) {
    uni.showToast({
      title: '昵称长度应小于12！',
      icon: 'none',
      duration: 2000,
      mask: true,
    })
  } else if (userInfo.value.name !== username.value) {
    await apiEditNameOrAvatar({
      openId: userInfo.value.openId,
      name: username.value,
    })
    await getUserInfo()
    uni.showToast({
      title: '修改成功！',
      icon: 'success',
      duration: 1000,
      mask: true,
    })
    showType.value = 'text'
  }
}

const handleCancelEditName = () => {
  showType.value = 'text'
}
// 请输入手机号
const handleGetphonenumber = async (event) => {
  const { detail } = event
  const phoneCode = detail.code
  const phoneMsg = detail.errMsg
  const openid = userInfo.value.openId
  console.log(event)
  if (phoneMsg == 'getPhoneNumber:ok') {
    // 获取手机号
    await apiSetPhone({
      jsCode: phoneCode,
      openId: openid,
      appId: appId,
    })
    getUserInfo()
  }
}
</script>

<style lang="scss" scoped>
.row {
  padding: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid ghostwhite;
  font-size: 28rpx;
  background-color: #fff;
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 1px solid gainsboro;
  }
}
</style>
